<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-05-20 16:42:12
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-08-01 13:29:25
 * @Description  : 
-->
<template>
	<view class="menuBox">
		<uv-navbar
			bgColor="#fff"
			:fixed="true"
			titleStyle="color:#000"
			:placeholder="true"
			height="40"
			@leftClick="$onClickLeft"
			leftIconColor="#000"
			:title="shopInfo.shopName"></uv-navbar>
		<view class="asdasdas">
			<z-paging
				ref="paging"
				v-model="dataList"
				:auto-height="false"
				:default-page-size="9999"
				:show-refresher-when-reload="true"
				:auto="false"
				:fixed="false"
				:auto-show-back-to-top="true"
				:refresher-fps="0"
				:refresher-end-bounce-enabled="false"
				:refresher-default-duration="0"
				:refresher-complete-delay="150"
				refresher-pulling-text="松开刷新"
				refresher-default-text="再往下拉"
				:refresher-complete-duration="0"
				:refresher-refreshing-scrollable="false"
				@query="queryList">
				<!-- 顶部不随滚动区域 -->
				<template #top>
					<view class="searchBox">
						<uv-search
							shape="round"
							:showAction="false"
							bgColor="#f5f5f5"
							v-model="keyword"
							placeholderColor="#919293"
							@search="search"
							placeholder="请输入商品名称"></uv-search>
						<view @click="$onClickLeft" class="cancel">取消</view>
					</view>
				</template>
				<!-- 内容区域 -->
				<view class="goodItemBox">
					<!-- 商品 begin -->
					<view class="goodItem" v-for="(goodEle, key) in dataList" :key="key">
						<goodItemCom :goodEle="goodEle" :cart="cart" @showGoodDetail="showGoodDetail"/>
					</view>
				</view>
				<template #bottom>
					<view class="cartBarBox" v-show="dataList.length && cart.length">
						<cartBar :isNeedFixed="false" :cart="cart" ref="cartBarRef"/>
					</view>
					<uv-safe-bottom></uv-safe-bottom>
				</template>
			</z-paging>
		</view>
	</view>

	<productDetailModal
		:cart="cart"
		ref="productDetailModalCom" 
		@getCartBarInfo="getCartBarInfo"
	/>
</template>

<script setup>
	import goodItemCom from '@/pages/menu/components/goodItem.vue'
	import cartBar from '@/pages/menu/components/cartBar.vue'
	import { ref, computed, nextTick, onMounted, watch } from 'vue'
	import productDetailModal from '@/pages/menu/components/productDetailModal.vue'
	import { productSearch } from '@/api/goods'
	import { onLoad, onShow, onPullDownRefresh, onHide, onUnload } from '@dcloudio/uni-app'
	const shopInfo = ref({})
	const paging = ref()
	const dataList = ref([])
	const keyword = ref('')
	const queryList = async (pageNo, pageSize) => {
		const params = {
			pageNo,
			pageSize,
			shopId: shopInfo.value.shopId,
			keyword: keyword.value,
		}
		try {
			const ordersData = await productSearch(params)
			paging.value?.complete(ordersData)
			paging.value?.updatePageScrollBottomHeight()
		} catch (err) {
			paging.value?.complete(false)
		}
	}
	const productDetailModalCom = ref(null)
	const showGoodDetail = (currenClickGood,obj)=>{
		productDetailModalCom.value.init(currenClickGood,obj)
	}
	const search = () => {
		paging.value?.reload()
	}
	onMounted(() => {
		// 根据当前页面情况调整参数
	})
	const cartBarRef = ref()
	const getCartBarInfo = async () => {
		nextTick(async () => {
			productDetailModalCom.value.cartBarInfoCopy = await cartBarRef.value.getCartBount()
		})
	}
	onLoad(options => {
		shopInfo.value = options
	})
	// 页面卸载时关闭 WebSocket
	onUnload(() => {})
	onHide(() => {})
	onShow(() => {
		refreshCart()
	})
	const cart = ref([])
	watch(()=>cart,()=>{
		paging.value?.updatePageScrollBottomHeight()
	},{
		deep:true
	})
	const refreshCart = () => {
		cart.value = uni.getStorageSync('cart') || []
	}
</script>

<style lang="scss" scoped>
	.menuBox {
		height: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		.asdasdas {
			flex: 1;
			overflow: hidden;
		}

		.searchBox {
			display: flex;
			align-items: center;
			padding: 20rpx;
			width: 100%;
			.cancel {
				color: #000;
				margin-left: 20rpx;
				font-size: 26rpx;
			}
		}
		.goodItemBox {
			padding: 0 20rpx;
		}
	}
	.cartBarBox {
		flex-shrink: 0;
		::v-deep .cart-box {
			position: unset !important;
			border-radius: 0 !important;
			.pay-btn {
				border-radius: 0 !important;
			}
		}
	}
</style>
